<template>
  <div class="w">
    <div style="text-align: center">
      <!-- banner部分 -->
      <img src="/6.jpg" alt="" style="width: 30%" />
    </div>
    <swiper :options="swiperOption" style="text-align: center">
      <swiper-slide
        ><img style="width: 65%; height: 350px" src="/7.jpg" alt=""
      /></swiper-slide>
      <swiper-slide
        ><img style="width: 65%; height: 350px" src="/8.jpg" alt=""
      /></swiper-slide>
      <swiper-slide
        ><img style="width: 65%; height: 350px" src="/9.jpg" alt=""
      /></swiper-slide>
      <swiper-slide
        ><img style="width: 65%; height: 350px" src="/10.jpg" alt=""
      /></swiper-slide>
    </swiper>
    <br />
     <swiper :options="swiperOptions">
    <swiper-slide><img src="/12.jpg " alt="" style="width:450px;height:400px"></swiper-slide>
    <swiper-slide><img src="/13.jpg " alt="" style="width:450px;height:400px"></swiper-slide>
    <swiper-slide><img src="/14.jpg " alt="" style="width:450px;height:400px"></swiper-slide>
    <swiper-slide><img src="/15.jpg " alt="" style="width:450px;height:400px"></swiper-slide>
    <swiper-slide><img src="/16.jpg " alt="" style="width:450px;height:400px"></swiper-slide>
  </swiper>
    <div>
      <h1 style="text-align: center; color: orange">萌宠百科</h1>
      <br />
    </div>
    <div class="k">
      <div style="width: 20%; height: 20%; position: relative">
        <h3 style="color: orange; text-align: center">狗的口水有细菌吗?</h3>
        <br />
        <p>狗狗的口水是有细菌的,同时狗狗的口水也是可以传播狂犬病等疾病</p>
        <i
          class="el-icon-sunrise"
          style="position: absolute; left: 30px; top: 5px"
        ></i>
      </div>
      <div style="width: 20%; height: 20%; position: relative">
        <h3 style="color: orange; text-align: center">狗狗断尾有哪些原因?</h3>
        <br />
        <p>
          为了避免特殊犬种受伤、提高狗狗的工作效率而断尾；狗狗的尾巴受到不可逆损伤而不得不进行断尾。
        </p>
        <i
          class="el-icon-sunrise-1"
          style="position: absolute; left: 30px; top: 5px"
        ></i>
      </div>
      <div style="width: 20%; height: 20%; position: relative">
        <h3 style="color: orange; text-align: center">每天遛狗有哪些好处?</h3>
        <br />
        <p>
          遛狗是每个养狗家庭每日必备的项目,遛狗不仅能增强狗狗的体质,还能增进宠物和人之间的感情
        </p>
        <i
          class="el-icon-sunset"
          style="position: absolute; left: 30px; top: 5px"
        ></i>
      </div>
      <div style="width: 20%; height: 20%; position: relative">
        <h3 style="color: orange; text-align: center">狗狗的磨牙期在几个月?</h3>
        <br />
        <p>狗狗一般在3个月的时候开始磨牙,乱咬东西。</p>
        <i
          class="el-icon-sunny"
          style="position: absolute; left: 30px; top: 5px"
        ></i>
      </div>
    </div>
    <br />
    <br />
    <div class="z">
      <div style="width: 20%; height: 20%; position: relative">
        <h3 style="color: orange; text-align: center">狗狗的身上有跳蚤?</h3>
        <br />
        <p>
          我们可以用薰衣草精油直接的涂在狗狗红肿的地方。这样就可以杀死病菌以及虫卵之类的。家中经常容易找到，而且还很方便。
        </p>
        <i
          class="el-icon-cloudy"
          style="position: absolute; left: 30px; top: 5px"
        ></i>
      </div>
      <div style="width: 20%; height: 20%; position: relative">
        <h3 style="color: orange; text-align: center">狗狗的眼睛发炎?</h3>
        <br />
        <p>
          当出现这个问题的时候我们可以用生黄瓜汁儿给狗狗进行清洗眼睛。这对狗狗的眼睛既没有刺激，而且还可以起到消炎的作用。
        </p>
        <i
          class="el-icon-partly-cloudy"
          style="position: absolute; left: 30px; top: 5px"
        ></i>
      </div>
      <div style="width: 20%; height: 20%; position: relative">
        <h3 style="color: orange; text-align: center">狗狗食欲不振?</h3>
        <br />
        <p>这个时候可以给狗狗吃一些流动性强的食物，给它补充一些能量。</p>
        <i
          class="el-icon-cloudy-and-sunny"
          style="position: absolute; left: 30px; top: 5px"
        ></i>
      </div>
      <div style="width: 20%; height: 20%; position: relative">
        <h3 style="color: orange; text-align: center">狗狗得了寄生虫?</h3>
        <br />
        <p>
          养宠物狗一定要记得给狗狗驱虫，一般在狗狗三到六周的时候就可以驱虫了，这是很重要的。而且驱虫的时候需要定期驱虫。
        </p>
        <i
          class="el-icon-moon"
          style="position: absolute; left: 30px; top: 5px"
        ></i>
      </div>
    </div>
    <br />
    <div>
      <h1 style="text-align: center">文章列表</h1>
      <div
        v-for="item in articles"
        :key="item.index"
        @click="$router.push(`/article?title=${item.title}`)"
        style="
          display: flex;
          width: 100%;
          justify-content: space-between;
          padding: 0 24px;
          box-sizing: border-box;
          margin: 24px 0;
        "
      >
        <div
          style="
            width: 30%;
            padding: 12px;
            box-sizing: border-box;
            border: 1px solid #333;
          "
        >
          {{ item.title }}
        </div>
        <div
          style="
            width: 60%;
            padding: 12px;
            box-sizing: border-box;
            border: 1px solid #333;
          "
        >
          {{ item.sketch }}
        </div>
      </div>
      <br />
    </div>
    <br />
    <br />

    <div class="m">
      <p>疫苗</p>
      <p>呕吐</p>
      <p>驱虫</p>
      <p>掉毛</p>
      <p>寄生虫</p>
      <p>拉稀</p>
      <p>发抖</p>
      <p>猫瘟</p>
      <p>细小</p>
      <p>骨折</p>
      <p>异食癖</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      articles: [],
      swiperOptions:{
         slidesPerView: 3,
          spaceBetween: 30,
          autoplay: true,
          pagination: {
            el: '.swiper-pagination',
            clickable: true
      },
      },
      swiperOption: {
        effect: "cube",
        loop: true,
        autoplay: true,
      },
    }
  },
  mounted() {
    this.axios.get("http://localhost:3000/v1/article/findAll").then((res) => {
      console.log("加载文章", res);
      this.articles = res.data.data;
    });
  },
};
</script>
<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
.w {
  position: absolute;
  height: 80%;
  width: 80%;
  top: 10%;
  left: 10%;
  background-color: #f5f5dc;
  overflow: auto;
}
.k {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.z {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.m {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  color: #cc3300;
}
</style>
